<template>
  <RouterLink to="/home">go /home</RouterLink>
  <button>动态添加 /home 路由</button>

  <hr />
  <RouterLink to="/about">go /about</RouterLink>
  <button @click="addAbout">动态添加 /about 路由</button>

  <hr />
  <button @click="delHome">动态删除 /home 路由</button>

  <RouterView />
</template>

<script>
export default {
  methods: {
    addAbout() {
      /**
       * 动态添加一条路由到路由器上，
       *
       * router.addRoute
       */
      // 添加顶级路由
      // this.$router.addRoute({
      //   path: "/about",
      //   component: () => import("./pages/About.vue"),
      // });

      // 添加一条路由到 /home 的子级
      this.$router.addRoute("home", {
        path: "son",
        component: () => import("./pages/Son.vue"),
      });

      this.$router.push("/home/son");
    },

    delHome() {
      // 动态删除一条路由
      // this.$router.removeRoute("home");

      // router.getRoutes()
      console.log(this.$router.getRoutes());

      // router.hasRoute()
      console.log(this.$router.hasRoute("about"));
    },
  },
};
</script>
